<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="../../../../../styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="11%"><strong>Package</strong></td>
    <td width="89%">com.jxl.shuriken.controls </td>
  </tr>
  <tr>
    <td><strong>Class</strong></td>
    <td>public class UIComponent </td>
  </tr>
  <tr>
    <td><strong>Inheritance</strong></td>
    <td> UIComponent &gt; <a href="http://livedocs.adobe.com/flash/8/main/00002436.html#wp332876">MovieClip</a> </td>
  </tr>
  <tr>
    <td><strong>Subclasses</strong></td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>The base component class. It is treated like an <a href="http://en.wikipedia.org/wiki/Abstract_class#Abstract_and_concrete_classes">abstract class</a>, and should not be instantiated. Instead, you should write your own class and extend UIComponent. This class abtracts a lot of how the MovieClip class sizes &amp; renders itself. It provides a set of convention methods as well as some invalidation routines to make your components more efficient and easier to work with in code. The four steps are documented below, although, you only need to do Step 1. </p>
<h4>Setting Up your UIComponent based Class </h4>
<p>Step 1 is required, the rest are optional. </p>
<p><strong>Step 1 </strong></p>
<p>When extending the UIComponent class, your class MUST have the following:</p>
<pre><code>public static var  SYMBOL_NAME:String = &quot;LinkageID&quot;;</code></pre>
<p>Or, the shorter , AS1 version:</p>
<pre><code>static var SYMBOL_NAME = &quot;LinkageID&quot;;</code></pre>
<p>This allows other UIComponent controls to interact with it. The SYMBOL_NAME is the linkage ID of the associated library item. If you right click on a symbol in the Flash Library, and choose Linkage ID, that is the string you want to be the same. The convention is to have your package path and linkage ID the same, although they don't have to be. Additionally, it allows strong-typing (meaning if you mis-type, Flash will helpfully point out your mispelling) by doing:</p>
<p>attachMovie ( MyComponent.SYMBOL_NAME, &quot;mc&quot;, 0 ); </p>
<p><strong>Step 2</strong></p>
<p>Implement 1 time initializations in yor constructor, calling super first. If you don't have any, you don't need a constructor.</p>
<pre><code>public function MyComponent()
{
   super();<br />   // 1 time initialization stuff here
}</code></pre>
<p><strong>Step 3</strong></p>
<p>Implement a createChildren method. This method is called once by UIComponent, but you should assume it could get called again. This is the method where all of your dynamically created component children go, in the form of composition. Although you typically call super.createChildren first, there may be times where sub-classes may want to create their own version instead. In that case, you'd call super.createChildren last. </p>
<pre><code>private function createChildren():Void
{
   super.createChildren();

   if(label_txt == null)
   {
      label_txt = createLabel(&quot;__label_txt&quot;);
      label_txt.text = &quot;Title: &quot;;
      label_txt.multiline = false;
      label_txt.wordWrap = false;
   }
}</code></pre>
<p><strong>Step 4</strong></p>
<p>Implement a redraw method. This is where you move and size your GUI controls used in composition, and/or redraw things using the drawing API. Finally, if any properties were changed, this is a good place to redraw based on them. If you're component supports setting properties and only having them affect the component via redraw, this is a great way to support invalidation. You just set a bunch of properties, then call myComponent.invalidate(), and it'll redraw one frame later, and ONLY 1 time. This is important since Flash Player can only redraw once per frame, you can be sure that you aren't overely taxing the Flash Lite 2 player.</p>
<pre><code>private function redraw():Void
{
   super.redraw();

   label_txt.setSize(width, label_txt._height);
}</code></pre>
<p>view examples</p>
<p>See also</p>
<h4>Public Properties</h4>
<p>SYMBOL_NAME</p>
<p>data</p>
<p>defaultTextFormat</p>
<p>x</p>
<p>y</p>
<p>width</p>
<p>height</p>
<h4>Public Methods</h4>
<p>UIComponent ( ) </p>
<p>move ( x : Number , y : Number ) : Void </p>
<p>setSize ( width : Number , height : Number ) : Void</p>
<p>invalidate ( ) : Void </p>
<p>callLater ( scope : Object, func : Function, args : Array) : Void</p>
<p>cancelAllCallLaters ( ) : Void</p>
<p>createComponent ( class : UIComponent, name : String) : MovieClip</p>
<p>createLabel( name : String ) : TextField</p>
<p>&nbsp;     </p>
</body>
</html>
